<template>
    <div id="add-edit-model">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
            @close="clean"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="80px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('yN3XgYqWhrFfTFd4jBtU6')" :label-width="formLabelWidth">
                            <el-input disabled v-model="ruleForm.v_CheckNGContent" :placeholder="$t('yN3XgYqWhrFfTFd4jBtU6')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('tmruUpoyR5Zja3zkb5oJg')" :label-width="formLabelWidth">
                            <el-input disabled v-model="ruleForm.v_NGTypeName" :placeholder="$t('tmruUpoyR5Zja3zkb5oJg')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('tPiWuSFanLeOKbJWvfz')" :label-width="formLabelWidth">
                            <el-input disabled v-model="ruleForm.v_ApplyEmpName" :placeholder="$t('tPiWuSFanLeOKbJWvfz')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('hgt8rkigvu07O3lOsGgc2')" :label-width="formLabelWidth">
                            <el-input disabled v-model="ruleForm.v_ExistsContent" :placeholder="$t('hgt8rkigvu07O3lOsGgc2')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('dyWnpvJ8oFsUicF0Oau4f')" :label-width="formLabelWidth">
                            <!-- <template v-if="ruleForm.n_CheckChangeState === 1">
                                <div style="color:#67C23A;" class="path_look">
                                    <span>{{ $t('gsQNjjKc3Gdm5d9qiwHXk') }}</span>
                                </div>
                            </template>
                            <template v-else>
                                <el-select 
                                    filterable 
                                    class="m-2" 
                                    placeholder="" 
                                    v-model="ruleForm.n_CheckChangeState" 
                                >
                                    <el-option
                                        v-for="item in checkOption"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </template> -->
                            <el-select 
                                filterable 
                                class="m-2" 
                                placeholder="" 
                                v-model="ruleForm.n_CheckChangeState" 
                            >
                                <el-option
                                    v-for="item in checkOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('yZg4b_5Ls7c7fZd9uNw1g')" :label-width="formLabelWidth">
                            <el-input v-model="ruleForm.v_CheckChangeContent" :placeholder="$t('yZg4b_5Ls7c7fZd9uNw1g')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('q9AGpkl8zMfFqyAOgB8wZ')" :label-width="formLabelWidth">
                            <el-input v-model="ruleForm.v_CheckResultContent" :placeholder="$t('dwk9OlFhupn1G5tWKnnE8')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('pAwlJ0p0qBAgZqdtvyyHh')" prop="jobFile" :label-width="formLabelWidth">
                            <upload-file
                                :fileName="$t('pAwlJ0p0qBAgZqdtvyyHh')"
                                :isCancel="isCancel"
                                @fileArr="fileArrFun"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item :label="$t('9RLaVEiJf1Z1Qv15o6Kll')" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="ruleForm.v_Remake" :placeholder="$t('9RLaVEiJf1Z1Qv15o6Kll')" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            

            <el-divider content-position="left"> {{ $t('ms1fpd4AXyStopkHw95Z8') }} </el-divider>
            <el-table class="table-s" :data="fileListArr" style="width: 100%" border>
                <el-table-column min-width="270" prop="fileOriginName" :show-overflow-tooltip="true" :label="$t('5l2R6NiV8F5KyemPq8xq')"  align="center" />
                <el-table-column min-width="160" prop="createdTime" :show-overflow-tooltip="true" :label="$t('4pvjWhhdT5Nk2JMc5rQg')"  align="center" />
                <el-table-column min-width="120" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('8GbxAmDauKsBrgrQQa2')"  align="center" />
                <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('dScKg8pBv4cupCrxspq1r')"  align="center">
                    <template #default="scope">
                        <img style="width: 30px;height: 20px;" :src="pathData + scope.row.path" />
                    </template>
                </el-table-column>
                <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('liBmO8wb58NMw5HLu9Nf')"  align="center"  fixed="right">
                    <template #default="scope">
                        <el-link target="_blank" :href="pathData + scope.row.path" type="primary">{{ $t('i8A6uFe7Z4rYBFs9LUfm') }}</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <el-divider content-position="left">{{ $t('odQpuOypYmCIbyEj44TpZ') }}</el-divider>
            <el-table class="heightcss" :data="ruleForm.hazardDetail" style="width: 100%" border>
                <el-table-column min-width="200" prop="v_WorkType" :show-overflow-tooltip="true" :label="$t('9xM6FvTR_8nWq19wjfgx')"  align="center" />
                <el-table-column min-width="200" prop="v_WorkExplain" :show-overflow-tooltip="true" :label="$t('f0faXf3TEmiEjagrud8d')"  align="center" />
                <el-table-column min-width="200" prop="f_Risk_Assessment_L" :show-overflow-tooltip="true" :label="$t('kR6nl8il9ndraLnxdB3Mo')"  align="center" />
                <el-table-column min-width="200" prop="f_Risk_Assessment_E" :show-overflow-tooltip="true" :label="$t('dF0hvzTTgBxRtEjtHcQ7u')"  align="center" />
                <el-table-column min-width="200" prop="f_Risk_Assessment_C" :show-overflow-tooltip="true" :label="$t('4H_3Am3S96x5evGuS4uPz')"  align="center" />
                <el-table-column min-width="200" prop="f_Risk_Assessment_D" :show-overflow-tooltip="true" :label="$t('dEiB4EetFConPmp9cvAhZ')"  align="center" />
                <el-table-column min-width="200" prop="f_Risk_Assessment_D" :show-overflow-tooltip="true" :label="$t('dEiB4EetFConPmp9cvAhZ')"  align="center" />
                <el-table-column min-width="200" prop="v_Dangerous_Level" :show-overflow-tooltip="true" :label="$t('gCP5cJhRMe0BnrLqRs')"  align="center" />
                <el-table-column min-width="200" prop="v_Accient_TypeName" :show-overflow-tooltip="true" :label="$t('ebd7Jl2fPx6WeiyWryLYl')"  align="center" />
                <el-table-column min-width="200" prop="v_Shielding" :show-overflow-tooltip="true" :label="$t('fw78QmJeZpmsty3o1TeU')"  align="center" />
                <el-table-column min-width="200" prop="v_Advice_Shielding" :show-overflow-tooltip="true" :label="$t('l4v70UyItNhFizQ4AInL6')"  align="center" />
                <el-table-column min-width="200" prop="v_Control_Level" :show-overflow-tooltip="true" :label="$t('7Lw5y52b0yczYwCbDguvq')"  align="center" />
                <el-table-column min-width="200" prop="v_Control_Measures" :show-overflow-tooltip="true" :label="$t('xCeeB3WeM4ZkHhTh5btqG')"  align="center" />
                <el-table-column min-width="200" prop="v_OrgName" :show-overflow-tooltip="true" :label="$t('cw6bUPoDlHdwNcW40my')"  align="center" />
                <el-table-column min-width="200" prop="v_EmpName" :show-overflow-tooltip="true" :label="$t('y7I9J0Du746oyZTnse2kM')"  align="center" />
                <el-table-column min-width="200" prop="v_PushTypeName" :show-overflow-tooltip="true" :label="$t('dHxlDhT9RRckG6mYRjgeQ')"  align="center" />
                <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('s4KbtSrTfOzuWyRcHgTxx')" align="center">
                    <template #default="scope">
                        <template v-if="scope.row.v_JobFilePath">
                            <el-link target="_blank" :href="pathData + scope.row.filePaths" type="primary">{{ $t('2KyEk7Ir2Lz3bN9ByjSaE') }}</el-link>
                        </template>
                        <template v-else>
                            <div style="color:#c0c4cc;">
                                <span>{{ $t('66gSt7xsIbieLa59Td1H') }}</span>
                            </div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column min-width="200" prop="v_Remake" :show-overflow-tooltip="true" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')"  align="center" />
                <el-table-column min-width="200" prop="createdTime" :show-overflow-tooltip="true" :label="$t('xxAj6fsjvIsQrMdlNpolv')"  align="center" />
                <el-table-column min-width="200" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('v7AhfaNeGaFoPfZzgpFk')"  align="center" />
                <el-table-column min-width="200" prop="updatedTime" :show-overflow-tooltip="true" :label="$t('hMMqYalIdWhk0McqdxTg')"  align="center" />
                <el-table-column min-width="200" prop="updatedUserName" :show-overflow-tooltip="true" :label="$t('2Gu4SnAncIkNclplw6vNj')"  align="center" />
            </el-table>
            <template #footer>
                <el-button @click="cancelUseClick">{{ $t('eg9MxkLqtdZzYrXmq936v') }}</el-button>
                <el-button type="primary" :disabled="repeatDis" @click="submitForm(ruleFormRef)">{{ $t('o1SPkDfvCdgvoQhrmIf9q') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref , reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import { 
    SecurityCheckChangeUpdate,
    sysFileInfoMultipleUploads ,
    AttendanceRecordGenerateId ,
} from '/@/api/sms/sms'
import UploadFile from '../../components/upload-file.vue'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: any,
}
/*** form 表单数据类型 */
type ruleFormType = {
    v_CheckNGContent: any
    v_NGTypeName: any
    v_ApplyEmpName: any
    v_ExistsContent: any
    n_CheckChangeState: number
    v_CheckChangeContent: any
    v_CheckResultContent: any
    v_Remake: any
}
export default defineComponent( {
    name: 'add-edit-model',
    components: { UploadFile },
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;
        
        const titleCon = ref()
        const ruleFormRef = ref()
        const checkOption:any = ref([])
        const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址
        const fileListArr: any = ref([])

        // 多文件上传定义信息
        const isCancel = ref(false)
        let snowflakeId: any = 0
        let fileArrList:any = []
        // 多文件上传定义信息

        // ===============多文件上传封装方法===========

        /*** getNeedId 获取雪花id */
        const getNeedId = async () => {
            let res:any = await AttendanceRecordGenerateId()
            if(res.success) snowflakeId = res.data
        }

        /***  fileArrFun 文件上传数据回传 */
        const fileArrFun = (arr:any) => {
            fileArrList = arr
        }
        /*** fileInfoFun 处理文件格式 */
        const fileInfoFun = (file: any) => {
            let fileArr:any = []
            if(file.length !== 0){
                file.map((i:any) => {
                    fileArr.push(i.raw)
                })
            }
            return fileArr
        }
        /*** uploadFileFuns 多文件上传无返回提示 */
        const uploadFileFuns = async (file: any , xhId: Number) => {
            let param:any = {}
            param.files = file
            param.sourceType = 'SMS'
            param.sourceId = xhId
            let res:any = await sysFileInfoMultipleUploads(param)
            if(res.success) return
        }
        // ===============多文件上传封装方法===========

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick()
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            cleanFile()
            ctx.emit('cancelUseClick')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    // state.repeatDis = true
                    let getData:any = toRaw(state.ruleForm)
                    // let param:any = {}
                    // getData.n_CheckResultImage ? param.n_CheckResultImage = getData.n_CheckResultImage : param.n_CheckResultImage = snowflakeId
                    // let valObj = {...getData , ...param}
                    let valObj = getData
                    
                    // 文件上传
                    if(fileArrList.length !== 0){
                        let arr = fileInfoFun(fileArrList)
                        uploadFileFuns(arr, getData.n_CheckResultImage)
                    }
                    // 文件上传
                    let res:any = await SecurityCheckChangeUpdate(valObj)
                    if(res.success){
                        ctx.emit('controlUseClick','success')
                        ctx.emit('updateData')
                        cleanFile()
                    }
                }else{
                    console.log('error submit!')
					return false
                }
            })
        }

        /*** clean 清空数据 */
        const clean = () => {
            ruleFormRef.value.resetFields()
        }

        /*** cleanFile 清空文件数据 */
        const cleanFile = () => {
            isCancel.value = true
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                titleCon.value = $t('xR8yVcFf6jOp2qqz4xM3j')
                state.repeatDis = false
                isCancel.value = false
                let getData = JSON.parse(props.repairInfo)
                // 基础数据清除
                const { 
                    tenantId , 
                    isDeleted , 
                    updatedTime , 
                    updatedUserId , 
                    updatedUserName ,
                    createdTime ,
                    createdUserId ,
                    createdUserName ,
                ...setData} = getData

                if(getData.v_CheckNgImagePath && getData.v_CheckNgImagePath.length !== 0){
                    fileListArr.value = getData.v_CheckNgImagePath
                }else{
                    fileListArr.value = [] 
                }

                if(getData.hazardDetail && getData.hazardDetail.length !== 0){
                    getData.hazardDetail.map((i:any) => {
                        if(i.n_PushType <= 1){
                            i.v_PushTypeName = $t('7dvrp8KNteJ2KsyX53N')
                        }else if(i.n_PushType === 2){
                            i.v_PushTypeName = $t('0GdEpZhBB3RGlirtCm1U')
                        }else if(i.n_PushType === 3){
                            i.v_PushTypeName = $t('w3sd0wQwiYthGeopJcU4t')
                        }else if(i.n_PushType === 4){
                            i.v_PushTypeName = $t('eec8W28NIj_1hBweAkWs')
                        }else{
                            i.v_PushTypeName = $t('tuRoDlk7koL463Gf9SbzY')
                        }
                    })
                }else{
                    getData.hazardDetail = []
                }

                // if(getData.n_CheckChangeState === 0){
                //     checkOption.value = [
                //         { label: $t('hBvBsDnjstxkRs0w3J29') , value: 0},
                //         { label: $t('mnMpouK9iVh6eCWf2anDb') , value: 2},
                //     ]
                // }
                // if(getData.n_CheckChangeState === 2){
                //     checkOption.value = [
                //         { label: $t('v3SRqYugCbKyLx4pDVvNh') , value: 2},
                //         { label: $t('gsQNjjKc3Gdm5d9qiwHXk') , value: 1},
                //     ]
                // }
                if(getData.n_CheckChangeState === 0) setData.n_CheckChangeState = 2;
                state.ruleForm = setData
                // getNeedId()
                console.log(setData,'setData')
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            clean,
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            rules,
            checkOption: [
                {label: $t('mnMpouK9iVh6eCWf2anDb') , value: 2},
                {label: $t('gsQNjjKc3Gdm5d9qiwHXk') , value: 1},
            ],
            formLabelWidth: '120px',
            pathData,
            fileListArr,

            // 多文件上传方法
            fileArrFun,
            isCancel,
            // 多文件上传方法
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
    :deep(.el-upload){
        width: 100%;
    }
    // 文件上传样式
    .upload-d{
        position: relative;
        width: 100%;
        :deep(.el-upload){
            width: 100%;
            // position: absolute;
            // top: 0;
            // left: 0;
        }
        .path_look{
            display: block;
            width: 100%;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            position: absolute;
            left: 0;
            top: 0;
            span{
                display: block;
                margin-left: 15px;  
                color: #606266;
            }
        }
        .upload-in{
            position: absolute;
            left: 0;
            top: 0;
        }
        .upload-b{
            display: flex;
            align-items: center;
            position: absolute;
            top: 8px;
            right: 10px;
            line-height: initial;
            background: unset !important;
            :deep(a){
                background: unset !important;
                margin-right: 10px;
            }
            :deep(span){
                background: unset !important;
            }
        }
    }
</style>